<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数中的this</title>
</head>

<body>
    <!-- 
        1. this 是什么？
            任何函数本质上都是通过某个对象来调用的（如果没有指定是谁来调用，那么这个对象就是window）
            所有函数内部都有一个变量this
            他的值是调用函数的当前对象
     -->
    <script>
        function Person(color) {
            console.log(this)
            this.color = color
            this.getColor = function () {
                console.log(this)
                return this.color
            }
            this.setColor = function (color) {
                console.log(this)
                this.color = color
            }
        }
        // this 是 window
        Person('red')
        // this 是 p
        let p = new Person('green')
        // this 是 p
        p.getColor()
        let obj = {}
        // this 是 obj
        p.setColor.call(obj, 'yellow')

        let test = p.setColor
        // this 是 window
        test()

        function fn1() {
            console.log(this)
            function fn2() {
                console.log(this)
            }
            // this是 window
            fn2()
        }
        // this是window
        fn1()
    </script>
</body>

</html>